<template>
<div class="user">
<div class="detail_message" ref="ref_detail_message">
 <el-descriptions title="" direction="vertical" :column="7" border :data="detail_mes">
   
    <template slot="extra">
             <span class="span">详情列表</span>
             <div class="lose_a" ref="ref_lose"></div>
          <i class="el-icon-edit" ref="ref_edit" @click="handleCloseEdit()"></i>
         <!--  -->
          <div class="selections" ref="ref_selections">
            <i class="el-icon-upload el-icon--right"></i>
            <i class="el-icon-share"></i>
            <i class="el-icon-plus" @click="addNew_desc()"></i>
            <i class="el-icon-delete" @click="handleDeleted1()"></i>
            <i class="el-icon-check" @click="handleEdit()"></i>
            <i class="el-icon-close" @click="close_selections()"></i>
        </div>
      </template>
       <!-- 使用template进行包裹遍历（注意：key要放在真实dom上）slot-scope="scope"  ref="ref_normal"-->
         <template v-for="(item, index) in detail_mes">
 
      <el-descriptions-item label="序号" :key="index" class="input_min"> {{index+1}}</el-descriptions-item>
      <el-descriptions-item label="日期"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.date"> </el-descriptions-item>
       <el-descriptions-item label="用户名"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.username" ></el-descriptions-item>
      <el-descriptions-item label="账号"  :key="index"><input type="text" title="账号不可修改" class="input_medium" v-model.lazy="item.user"></el-descriptions-item>
      <el-descriptions-item label="密码"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.password"></el-descriptions-item>
      
        </template>
        <!-- 新建页面 -->
           
        <!-- 结束页面 -->
</el-descriptions>
</div>
<!--  -->
<div class="lose2" ref="ref_lose2"></div>
<el-table
  :data="tableData"
  border
  style="width: 99%"
  fit
  type="index"
  class="table"
  >
<el-table-column
  fixed
  label="序号"
  width="70"
  >
  <template scope="scope">
    {{scope.$index+1}}
  </template>
</el-table-column>
<el-table-column
  fixed
  prop="date"
  label="日期"
  width="180"
  sortable 
  >
</el-table-column>
  <el-table-column
  prop="username"
  label="用户名"
  width="200">
</el-table-column>
  <el-table-column
  prop="user"
  label="账号"
  width="250">
</el-table-column>
<el-table-column
  prop="password"
  label="密码"
  width="250">
</el-table-column>
<el-table-column
  prop="type"
  label="账号类型"
  width="200">
</el-table-column>
<el-table-column
  label="操作"
  width="250"
  >
  <!-- 将当前 el-table-column 所在的上下文传递给插槽  scope.row 代表了当前行的数据对象 -->
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small" @click="handleDeleted(scope.row,scope.$index)" class="deleted">删除</el-button>
  </template>
</el-table-column>
</el-table>

  
  <div class="tableData_length" v-if="istableDataLength">当前数据为{{this.tableData.length}}条</div>

  </div>
  
</template>

<script>

export default {
  data(){
    return{
      istableDataLength:true,
      istrue:false,
      isshowUserMess:false,
      tableData: [],
      detail_mes:{},
      update_index:'',
      isadd:true,
      //判断是修改是新增
      addNumber:false,
      // newAdd_detail_mes:{date,},
    }
  },
  methods:{
        //打开详情及编辑器
         handleClick(row,index) {
            this.detail_mes = []
            this.$refs.ref_detail_message.style.opacity = '100%'
            this.$refs.ref_detail_message.style.height = '146px'
            this.$refs.ref_edit.style.display = 'block'
            this.detail_mes.push(row)
            console.log('拿到index',index);
            this.update_index = index
            
          },
          //保存
          handleEdit(){
            //打开编辑器
             this.$refs.ref_edit.style.display = 'block'
             //关闭选择框
             this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_selections.style.height = '0px'
            this.$refs.ref_lose.style.height = '15px'
            this.$refs.ref_lose2.style.height  = '0px'
            //更新
            console.log('需要更新的数据',this.detail_mes);
            if(this.detail_mes[0].user != '' && this.addNumber == false){
                    //弹窗成功
                    this.$message({
                      showClose: true,
                      message: '您修改了一个记录！',
                      type: 'success'
                     });
                    let a = this.update_index
                    this.$axios.post('/api/update/user_lists?date='+this.detail_mes[0].date+'&username='+this.detail_mes[0].username+
                    '&user='+this.detail_mes[0].user+'&password='+this.detail_mes[0].password).then(res=>{
                    console.log(res);
              })
              
            }
           
            //新增
            if(this.detail_mes[0].user != '' && this.addNumber == true){
              console.log('新增',this.detail_mes);
              this.$axios.post('/api/user_lists/insert?date='+this.detail_mes[0].date+'&username='+this.detail_mes[0].username+
              '&user='+this.detail_mes[0].user+'&password='+this.detail_mes[0].password).then(res=>{
                console.log(res);
                if(res.data.code !=200){
                    //弹窗警告
                    this.$message({
                      showClose: true,
                      message: '添加用户信息未完善！',
                      type: 'error'
                    });
                }else{
                    //弹窗成功
                  this.$message({
                    showClose: true,
                    message: '您添加了一个记录！',
                    type: 'success'
                  });
                }
              })
            }
            //关掉新增选项
            this.addNumber = false
            //刷新
              this.refresh()
          },
          //关闭编辑器及详情
          close_selections(){
            this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_lose2.style.height = '0px'
             this.$refs.ref_selections.style.height = '0px'
             this.$refs.ref_detail_message.style.opacity = '0%'
            this.$refs.ref_detail_message.style.height = '0px'
             this.$refs.ref_lose.style.height  = '15px'
            
          },
          //关闭编辑打开选择框
          handleCloseEdit(){
            this.$refs.ref_edit.style.display = 'none'
            this.$refs.ref_selections.style.opacity = '100%'
            this.$refs.ref_selections.style.height = '30px'
            this.$refs.ref_selections.style.top = '5%'
            this.$refs.ref_lose.style.height = '40px'
            this.$refs.ref_lose2.style.height  = '40px'
          },
          //删除1
          handleDeleted1(){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.post('/api/user_lists/deleted?user='+this.detail_mes[0].user)
              //刷新
              this.$axios.get("/api/user_lists").then(res=>{
                this.tableData = res.data.params.data
                //为空数组添加数据
                this.detail_mes = [{date:'',username:'',user:'',password:''}]
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //删除
          handleDeleted(row,index){
             this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.post('/api/user_lists/deleted?user='+row.user)
              //刷新
              this.$axios.get("/api/user_lists").then(res=>{
                this.tableData = res.data.params.data
                  //为空数组添加数据
                this.detail_mes =   this.detail_mes = [{date:'',username:'',user:'',password:''}]
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //添加数组
         addNew_desc(){
           console.log('添加');
            this.addNumber = true
            this.detail_mes = [{date:'',username:'',user:'',password:''}]
        },
        //刷新
        refresh(){
            //刷新
              let timer =  setInterval(res=>{
                      this.$router.replace({ path:'/empty',query:{a:'user'}})
                      console.log('定时器');
                      clearInterval(timer)
                },800)
        }
          
      },
  mounted(){
    //发送数据请求
      this.$axios.get("/api/user_lists").then(res=>{
       this.tableData = res.data.params.data
       console.log(this.tableData);
    })
    if(this.tableData.length==0){
      this.istableDataLength = false
    }

  },
}
</script>

<style>
::v-deep .el-table::before{
  overflow: auto;
  height: 800px;
  background-color: gray;
}
.deleted{
  color: crimson;
}
.el-icon-edit{
  position: absolute;
  top: 10%;
  width: 20px;
  height: 10px;
  right: 2%;
  color: white;
  background-color: dodgerblue;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}
.el-descriptions__body {
  margin-left: 0px;
  width: 100%;
}
.input_medium{
  width:140px;
  margin-right: 20px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_min{
  width: 50px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_max{
  width: 400px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}

.lose2{
  height: 0px;
}
.user{
  position: absolute;
  top: 8.6%;
  left: 182px;
  width: 88.8%;
  height: auto;
  display: flex;
  flex-flow: column;
  user-select: none;
  transition: all 1s;

}

  .selections{
    position: absolute;
    text-align: left;
    top: 4%;
    left: 1%;
    width: 100%;
    height: 0px;
    opacity: 0%;
    transition: all 1s;
  }
  
  .selections>i{
    margin: 3px;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: rgb(99, 168, 237);
  }
    .selections>i:nth-child(5){
      position: absolute;
    left: 89%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }

  .selections>i:nth-child(6){
    position: absolute;
    left: 93.5%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }
  .selections>i:hover{
    background-color: dodgerblue;
  }
  .selections>i:active{
    background-color: rgba(30, 143, 255, 0.626);
  }
  .span{
    position: absolute;
    display: block;
    left: 0%;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 20px;
    font-family: '宋体';
    color: gray;
  }
  .lose_a{
    height: 15px;
    background-color: gray;
    transition: all 1s;
  }
.detail_message{
  margin-top: 10px;
  opacity: 0%;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 0px;
  transition: all 1s;
  box-shadow: 0px 1px 4px gray;
  /* background-color: gray; */
}

.tableData_length{
  text-align: center;
  color: gray;
}
.table{
  width: 50%;
  margin-top: 0px;
  margin-left: 10px;
  box-shadow: 0px 0px 4px gray;
  color: white;
  transition: all 1s;
}

/* table{

 
}
th{
  border: 2px solid black;
}
tr{
  border: 1px solid ;
}
td{
   border: 1px solid gray;
} */





</style>